<!-- 客户统计 -->
<template>
  <div class="customer_statistics_page" v-if="hasShowClue || hasShowVisitor">
    <div class="main_label">
      <span>客户统计</span>
    </div>
    <div class="customer_content">
      <div :class="['warp']" v-if="hasShowClue">
        <div class="label">总线索：{{ info.totalClueCount }}组</div>
        <!-- <div class="item">
          <span v-for="item in clue" :key="item.fieldName">
            {{ item.dailyConfigShortName }}：{{ info[item.fieldName] }}组
          </span>
        </div> -->
        <div>
          <div
            v-if="
              monthTargets.currentState == 2 ||
              (monthTargets.currentState == 3 && monthTargets.currentMonthTargets == '无需设定')
            ">
            {{ monthNum }}月线索目标：{{
              !monthTargets.currentMonthTargets && monthTargets.currentState
                ? '未设定'
                : monthTargets.currentMonthTargets
            }}
          </div>
          <div
            style="display: flex; justify-content: space-between"
            v-if="
              monthTargets.currentState == 1 ||
              (monthTargets.currentState == 3 && monthTargets.currentMonthTargets != '无需设定')
            ">
            <div>
              <div>{{ monthNum }}月累计</div>
              <div>{{ monthTargets.accumulatedThisMonth }}组</div>
            </div>
            <div>
              <div>{{ monthNum }}月目标</div>
              <div>{{ monthTargets.currentMonthTargets }}组</div>
            </div>
            <div>
              <div>达成率</div>
              <div>{{ monthTargets.displayResult || '-' }}</div>
            </div>
          </div>
          <div v-if="isLastTenDaysOfCurrentMonth() && monthTargets.nextState == 1" style="line-height: 25px">
            <div v-if="!monthTargets.nextMonthTargets" style="display: flex; justify-content: space-between">
              <span>下月线索目标可以开始设定啦</span>
              <span class="set_clue" @click="setClue" v-if="!isEdit">去设定</span>
            </div>
            <div v-if="monthTargets.nextMonthTargets" style="display: flex; justify-content: space-between">
              <span>下月线索目标</span>
              <span>
                {{ monthTargets.nextMonthTargets }}
                <span v-if="monthTargets.nextMonthTargets && monthTargets.nextMonthTargets != '无需设定'">
                  组
                </span>
              </span>

              <span class="set_clue" @click="setClue" v-if="!isEdit">编辑</span>
            </div>
          </div>
        </div>
      </div>
      <div :class="['warp', hasShowVisitor && hasShowClue ? 'boder_top' : '']" v-if="hasShowVisitor">
        <div class="label">总来人：{{ info.visitorCount }}组</div>
        <div class="item">
          <span v-for="item in visitor" :key="item.fieldName">
            {{ item.dailyConfigShortName }}：{{ info[item.fieldName] }}组
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import dailyApi from '@/biz/buildingHome/daily'

  export default {
    props: ['isEdit'],
    data() {
      return {
        info: {},
        hasShowVisitor: false, //控制来人展示
        visitor: null, //来人
        hasShowClue: false, //控制线索展示
        clue: null, //线索
        monthTargets: {},
        monthNum: ''
      }
    },
    methods: {
      //获取时间是否在当月月底前十天
      isLastTenDaysOfCurrentMonth() {
        let date = this.$parent.currentDate + ' 00:00:00'
        let today = new Date(date)
        this.monthNum = today.getMonth() == new Date().getMonth() ? '本' : today.getMonth() + 1
        let lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0)
        let tenthDay = new Date(today.getFullYear(), today.getMonth(), lastDay.getDate() - 9)
        return (
          today.getTime() >= tenthDay.getTime() &&
          today.getTime() <= lastDay.getTime() &&
          today.getMonth() == new Date().getMonth()
        )
      },
      getTemplate(data) {
        this.hasShowVisitor = data.templateAllList[1].hasShow
        this.visitor = data.templateAllList[1].childModelConfig.filter((item) => {
          return item.hasDefault && item.hasLock
        })
        this.hasShowClue = data.templateAllList[0].hasShow
        this.clue = data.templateAllList[0].childModelConfig.filter((item) => {
          return item.hasDefault && item.hasLock
        })
        this.getData()
        this.getCurrentMonthAndNextMonth()
      },
      getData() {
        let params = {
          orgId: this.$dt.buildInfo().housesId,
          level: 4,
          startTime: this.$parent.currentDate,
          endTime: this.$parent.currentDate
        }
        dailyApi.customerStatistics({ ...params }).then((res) => {
          this.info = res
        })
      },
      getCurrentMonthAndNextMonth() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          date: this.$parent.currentDate
        }
        dailyApi.getCurrentMonthAndNextMonth({ ...params }).then((res) => {
          this.monthTargets = res
        })
      },
      //设定线索目标
      setClue() {
        this.$router.push({
          name: 'buildingConfigure',
          params: {
            fromCustomer: 'targetManagement'
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .customer_statistics_page {
    width: 100%;
    margin-bottom: 15px;

    .main_label {
      display: flex;
      justify-content: space-between;
      line-height: 20px;
      border-left: 5px solid #2b85e4;
      padding-left: 8px;
      font-size: 15px;
      margin-bottom: 15px;

      .sort {
        color: #2d8cf0;
        font-size: 14px;
        margin-right: 10px;
        cursor: pointer;
      }
    }

    .customer_content {
      border: 1px solid #ccc;
      padding: 0 15px;
      border-radius: 5px;

      .warp {
        padding-bottom: 10px;
      }

      .boder_top {
        border-top: 1px solid #ccc;
      }

      .label {
        font-size: 16px;
        font-weight: 600;
        padding: 15px 0 10px 0;
      }

      .item {
        font-size: 14px;
        line-height: 25px;

        span {
          width: 50%;
          display: inline-block;
        }
      }
    }
    .set_clue {
      color: #2b85e4;
      cursor: pointer;
    }
  }
</style>
